<template>
  <u-popup
    :closeOnClickOverlay="true"
    :show="true"
    round="10px"
    mode="bottom"
    @close="getServiceType"
  >
    <view class="service-type">
      <view class="st-header">
        <view class="name">请选择需求类型</view>
        <view class="icon" @click="getServiceType">x</view>
      </view>
      <view class="st-content">
        <view class="swapper" v-for="(item, index) of typeList" :key="index">
          <view class="item" @click="changeCurrentType(item)" :class="{ 'a-item': item === currentType }">
            {{ item }}
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "ServiceType",
  props: {
    defaultType: {
      type: String,
      default: "餐饮服务"
    }
  },
  data() {
    return {
      currentType: this.defaultType,
      typeList: [
        "餐饮服务",
        "食材供应",
        "清洗消杀",
        "燃油配送",
        "店面装修",
        "加盟连锁",
        "厨具设备",
        "维修疏通",
        "其他服务"
      ]
    };
  },
  methods: {
    changeCurrentType(type) {
      this.currentType = type;
    },
    getServiceType(){
      this.$emit('getServiceType', this.currentType)
    }
  }
};
</script>

<style scoped lang="scss">
.service-type {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  .st-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      color: #333333;
      font-size: 16px;
      font-weight: 400;
    }
    .icon {
      color: #c3c3c3;
      font-size: 22px;
    }
  }
  .st-content {
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    .swapper {
      display: flex;
      justify-content: center;
      width: 33.33%;
      margin-top: 18px;
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        width: 100px;
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        &.a-item {
          background: #ff8822;
          border: none;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
